
import { Component } from "react"
import { Table, Button ,Input} from "antd"
// connect方法的作用：将额外的props传递给组件，并返回新的组件，组件在该过程中不会受到影响
import { connect } from 'react-redux'
import { setPageTitle, setInfoList, setCount, setUserInfo} from '../store/actions'
import widthRouter from "../router/witchRouter"
import {Outlet} from "react-router-dom"




class List extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "列表页",
            list: [
                {
                    key: '1',
                    name: '胡彦斌',
                    age: 32,
                    address: '西湖区湖底公园1号',
                },
                {
                    key: '2',
                    name: '胡彦祖',
                    age: 42,
                    address: '西湖区湖底公园1号',
                },
            ],
            columns: [
                {
                    title: '姓名',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: '年龄',
                    dataIndex: 'age',
                    key: 'age',
                },
                {
                    title: '住址',
                    dataIndex: 'address',
                    key: 'address',
                },
            ]
        }
    }
    componentDidMount() {
        let { setPageTitle, setInfoList, setCount } = this.props
        const [searchParams, setSearchParams] = this.props.query;
        console.log(this.props,1212121)
        console.log(searchParams.get("id"))
        // console.log(setPateTitle);
        // 触发setPageTitle action
        setPageTitle('新的标题')
    }
    goUrl(){
        this.props.navigate("/")
    }
    setUserName(e){
        this.props.setUserInfo({
            name:e.target.value,
            id:1111
        })
    }
    render() {
        const { list, columns } = this.state
        let { pageTitle, infoList, count,setCount,userInfo} = this.props
        return (
            <div>
                <h2>{this.state.title}</h2>
                <h2>{pageTitle}本页参数为{this.props.params.id}</h2>
                <div>redux演示   count:{count}</div>
                <div>
                    <Button type="primary" onClick={setCount.bind(this,"DEL")}>count--</Button>
                    <span style={{marginLeft:15}}></span>
                    <Button type="primary" onClick={()=>setCount("INCRE")}>count++</Button>
                    <Button type="primary" onClick={()=>this.goUrl()}>跳转</Button>
                    <Input placeholder="设置用户名" onBlur={(e)=>this.setUserName(e)} />
                </div>
                <div>用户名:{userInfo.name}</div>
                <Table dataSource={list} columns={columns} />
                <Outlet/>
            </div>
        )
    }

}

// mapStateToProps：将state映射到组件的props中
const mapStateToProps = (state) => {
    return {
        pageTitle: state.pageTitle,
        infoList: state.infoList,
        count: state.count,
        userInfo:state.userInfo
    }
}

// mapDispatchToProps：将dispatch映射到组件的props中
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        setPageTitle(data) {
            // 如果不懂这里的逻辑可查看前面对redux-thunk的介绍
            dispatch(setPageTitle(data))
            // 执行setPageTitle会返回一个函数
            // 这正是redux-thunk的所用之处:异步action
            // 上行代码相当于
            /*dispatch((dispatch, getState) => {
                dispatch({ type: 'SET_PAGE_TITLE', data: data })
            )*/
        },
        setInfoList(data) {
            dispatch(setInfoList(data))
        },
        setCount(type) {
            dispatch(setCount(type))
        },
        setUserInfo(data){
            dispatch(setUserInfo("SET",data))
        }
    }
}

export default widthRouter(connect(mapStateToProps, mapDispatchToProps)(List))